
<div class="operate">
  <div class="search">
    <nz-input-group nzSearch [nzAddOnAfter]="searchButton">
      <input type="text" nz-input placeholder="请输入新闻内容进行查询或作者名字进行过滤" [(ngModel)]="searchInput" />
    </nz-input-group>
    <ng-template #searchButton>
      <button style="width: 40px" nz-button nzType="primary" (click)="searchContent()" nzSearch><em nz-icon nzType="search"></em></button>
      <button nz-button nzType="primary" (click)="filterAuthor()">filter</button>
      <button nz-button nzType="primary" (click)="reset()">重置</button>
    </ng-template>
  </div>
</div>
<div class="news">
  <div *ngFor="let article of displayNews?.articles;let i = index">
      <nz-card class="card" [nzTitle]="titleTemplate">
        <div [innerHTML]="article?.content"></div>
      </nz-card>
      <ng-template #titleTemplate>
        <p class="card-title" [title]="article?.title">{{article?.title}}</p>
        <p class="card-author" [title]="article?.author">{{article?.author}}</p>
      </ng-template>
  </div>
</div>
